import React from 'react';
import {Row, Col, Menu, Icon} from 'antd';
import {Link} from 'react-router';
import userStore from '../store/userStore';

export default class Navi extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }

  logout() {
    userStore.logout();
    this.context.router.push('/login');
  }

  render() {
    var path = '/home';
    if (this.props.location.pathname.startsWith('/home')) {
      path = '/home';
    } else if (this.props.location.pathname.startsWith('/design')) {
      path = '/design';
    } else if (this.props.location.pathname.startsWith('/login')) {
      path = '/login';
    } else if (this.props.location.pathname.startsWith('/register')) {
      path = '/register';
    }

    return (
      <div>
        <header>
            <div className="nav-top">
                <p>您好，欢迎访问『钻头设计定制』网站</p>
            </div>
            <div className="banner">
                <ul>
                    <li><img src={require('../images/logo.png')} alt="logo" /></li>
                    <li><img src={require('../images/text.png')} alt="" /></li>
                </ul>
            </div>
            <div className="nav">
                <ul>
                    <li className={path === '/home'? 'active': ''}>
                      <Link to="/home">首页</Link>
                    </li>
                    <li className={path === '/design'? 'active': ''}>
                      <Link className="navi-item" to="/design">钻头定制</Link>
                    </li>
                    <li className={path === '/register'? 'active': ''}>
                      <Link className="navi-item" to="/register">用户注册</Link>
                    </li>
                    <li><a href="" onClick={() => this.logout()}>退出</a></li>
                </ul>
            </div>
        </header>

        <section>
          {this.props.children}
        </section>


        <footer>
            <div className="foot">
                关于我们  |  联系我们  |   团队介绍  |  服务协议  |   隐私条款  |  常见问题 | 合作伙伴 | 加入我们
            </div>
        </footer>
      </div>
    );
  }
}
